<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ 'reset.accessory_all.title' | translate }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
      [disabled]="clicked"
    ></button>
  </div>
  <div class="modal-body">
    @if (cachedAccessories.length === 0) {
    <div class="text-center mb-3">
      <i class="fas fa-circle-check primary-text" style="font-size: 75px"></i>
    </div>
    <p class="mb-0 text-center">{{ 'reset.no_accessories' | translate }}</p>
    } @if (cachedAccessories.length > 0) {
    <div class="text-center mb-3">
      <i class="fas fa-network-wired primary-text" style="font-size: 75px"></i>
    </div>
    <ul class="mb-3">
      <li>{{ 'reset.accessory_all.list_1' | translate }}</li>
      <li>{{ 'reset.accessory_all.list_2' | translate }}</li>
      <li>{{ 'reset.accessory_all.list_3' | translate }}</li>
    </ul>
    <ngb-alert type="error" [dismissible]="false" class="mb-0">
      <p class="text-center mb-0">{{ 'reset.action_is_irreversible' | translate }}</p>
    </ngb-alert>
    }
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      @if (cachedAccessories.length > 0) {
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [attr.aria-label]="'form.button_close' | translate"
        [disabled]="clicked"
      >
        {{ 'form.button_close' | translate }}
      </button>
      }
    </div>
    <div class="text-center">
      @if (cachedAccessories.length === 0) {
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [attr.aria-label]="'form.button_close' | translate"
      >
        {{ 'form.button_close' | translate }}
      </button>
      }
    </div>
    <div class="text-end">
      @if (cachedAccessories.length > 0) {
      <button
        type="button"
        class="btn btn-danger"
        data-bs-dismiss="modal"
        (click)="onResetCachedAccessoriesClick()"
        [disabled]="clicked"
      >
        @if (!clicked) { {{ 'form.button_remove' | translate }} } @if (clicked) {
        <i class="fas fa-spinner fa-pulse"></i>
        }
      </button>
      }
    </div>
  </div>
</div>
